// Ajax请求轮播图
Ajax({
    url: 'http://localhost:3000/banner',
    params: {
        type: 0,
    },
    type: 'get',
}).then(function resolve(res) {
    const slide = document.querySelector('.swiper-wrapper');
    // console.log(res);
    const banners = res.banners;
    let str = '';
    banners.forEach(function (item, index) {
        // console.log(item, index);
        // console.log(item.imageUrl);
        let src = item.imageUrl;
        str += `<div class="swiper-slide"><img src="${src}"></div>`;
        // console.log(str);
    });
    slide.innerHTML = str;
}, function reject(err) {
    console.log(err);
})

Ajax({
    url: 'http://localhost:3000/album/newest',
    params: {},
    type: 'get',
}).then(function resolve(res) {
    // console.log(res.albums);
    let str = '';
    const wrap = document.querySelector('.wrapper');
    res.albums.forEach(function (item, index) {
        if (index > 8) return;
        if ((index + 1) % 3 == 0) {
            str += `<a class="showItme mr0 consult" href="#">
            <div class=view>
                <!-- 隐藏的字 -->
                <div class=view-back>
                    <span data-icon="">Hot</span>
                    <span data-icon="">☀️</span>
                </div>
                <!-- 图片 -->
                <div class="slice s1" style="background-image: url('${item.artist.picUrl}');">
                    <span class="overlay"></span>
                    <div class="slice s2" style="background-image: url('${item.artist.picUrl}');">
                        <span class="overlay"></span>
                        <div class="slice s3" style="background-image: url('${item.artist.picUrl}');">
                            <span class="overlay"></span>
                            <div class="slice s4" style="background-image: url('${item.artist.picUrl}');">
                                <span class="overlay"></span>
                                <div class="slice s5" style="background-image: url('${item.artist.picUrl}');">
                                    <span class="overlay"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class=info-box>
                <p class="left tit ellipsis course">${item.artist.name}📚<span style=color:#f18336></span>
                </p>
                <p class=ruler>
                    <span class=last>
                        <em></em>
                        ${item.company}
                    </span>
                </p>
            </div>
        </a>`;
        } else {
            str += `<a class="showItme consult" href="#">
            <div class=view>
                <!-- 隐藏的字 -->
                <div class=view-back>
                    <span data-icon="">Hot</span>
                    <span data-icon="">☀️</span>
                </div>
                <!-- 图片 -->
                <div class="slice s1" style="background-image: url('${item.artist.picUrl}');">
                    <span class="overlay"></span>
                    <div class="slice s2" style="background-image: url('${item.artist.picUrl}');">
                        <span class="overlay"></span>
                        <div class="slice s3" style="background-image: url('${item.artist.picUrl}');">
                            <span class="overlay"></span>
                            <div class="slice s4" style="background-image: url('${item.artist.picUrl}');">
                                <span class="overlay"></span>
                                <div class="slice s5" style="background-image: url('${item.artist.picUrl}');">
                                    <span class="overlay"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class=info-box>
                <p class="left tit ellipsis course">${item.artist.name}📚<span style=color:#f18336></span>
                </p>
                <p class=ruler>
                    <span class=last>
                        <em></em>
                        ${item.company}
                    </span>
                </p>
            </div>
        </a>`;

        }
        
    })
    wrap.innerHTML = str;
})

// Ajax({
//     url: 'http://localhost:3000/banner',
//     params: {
//         type: 0,
//     },
//     type: 'get',
// }).then(function resolve(res) {
//     const extNum = document.querySelector('.Exhibition_num'); 
//     const extBox = document.querySelector('.ProductExhibition_box'); 
//     console.log(extBox, extNum);
//     // console.log(res);
//     const banners = res.banners;
//     let strBox = '',
//         strNum = '';
//     banners.forEach(function (item, index) {
//         let src = item.imageUrl;
//         if (index == 0) {
//             strNum += `<div class="Exhibition_item czt_active"><img src="${src}" alt=""></div>`;
//         } else {
//             strNum += `<div class="Exhibition_item"><img src="${src}" alt=""></div>`;
//         }
//         strBox += `<div class="Exhibition_Img"><img src="${src}" alt=""></div>`;
//     });
//     strNum += `<div class="Exhibition_items"></div>`;
//     extBox.innerHTML = strBox;
//     extNum.innerHTML = strNum;
// }, function reject(err) {
//     console.log(err);
// })